<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>小车路径配置</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            text-align: center; /* Center the content horizontally */
        }
        h1 {
            color: #333;
        }
        label, select, input {
            font-size: 16px;
            margin: 5px 0;
        }
        .segment {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 10px;
            display: inline-block; /* Align segments inline */
            width: 300px; /* Fixed width for better alignment */
            text-align: left; /* Left-align text within the segment */
        }
        .segment h3 {
            margin-top: 0;
        }
        .container {
            margin: 20px 0;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 4px 16px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
        }
        button:hover {
            background-color: #45a049;
        }
        /* 模态对话框的样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4);
            padding-top: 60px;
        }
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>小车路径配置</h1>

    <!-- 生成配置部分 -->
    <label for="segmentCount">段数:</label>
    <input type="number" id="segmentCount" min="1" value="1">
    <button onclick="generateSegments()">生成段</button>
    <div id="segmentsContainer" class="container"></div>
    <button onclick="submitConfiguration()">提交配置</button>

    <!-- 发送消息按钮 -->
    <button onclick="openModal()">发送消息</button>

    <!-- 模态对话框 -->
    <div id="messageModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <h2>发送自定义消息</h2>
            <label for="messageIP">IP 地址:</label>
            <input type="text" id="messageIP" value="localhost">
            <br>
            <label for="messagePort">端口号:</label>
            <input type="number" id="messagePort" min="1" max="65535" value="12345">
            <br>
            <label for="messageContent">消息内容:</label>
            <input type="text" id="messageContent" value="Hello, world!">
            <br>
            <button onclick="sendMessage()">发送消息</button>
        </div>
    </div>

    <script>
        function generateSegments() {
            const segmentCount = document.getElementById('segmentCount').value;
            const container = document.getElementById('segmentsContainer');
            container.innerHTML = '';

            for (let i = 0; i < segmentCount; i++) {
                const segmentDiv = document.createElement('div');
                segmentDiv.classList.add('segment');
                segmentDiv.innerHTML = `
                    <h3>段 ${i + 1}</h3>
                    <label for="speed${i}">线速度:</label>
                    <input type="number" id="speed${i}" min="0" max="100" value="50"> m/s (0~100)
                    <br>
                    <label for="time${i}">时间:</label>
                    <input type="number" id="time${i}" min="0" value="0"> s
                    <br>
                    <label for="direction${i}">方向:</label>
                    <select id="direction${i}">
                        <option value="straight">直行</option>
                        <option value="left">左转</option>
                        <option value="right">右转</option>
                        <option value="u-turn">掉头</option>
                    </select>
                `;
                container.appendChild(segmentDiv);
            }
        }

        function submitConfiguration() {
            const segmentCount = document.getElementById('segmentCount').value;
            const configuration = [];
            let valid = true;

            for (let i = 0; i < segmentCount; i++) {
                const speed = parseInt(document.getElementById(`speed${i}`).value, 10);
                const direction = document.getElementById(`direction${i}`).value;
                const time = document.getElementById(`time${i}`).value;

                if (speed < 0 || speed > 100) {
                    alert(`段 ${i + 1} 的线速度不在 0 到 100 之间。请修正该段的线速度。`);
                    valid = false;
                    break;
                }

                configuration.push({
                    segment: i + 1,
                    speed: speed,
                    time: time,
                    direction: direction,
                });
            }

            if (valid) {
                console.log('小车路径配置:', configuration);

                fetch('http://localhost:3000/submit-configuration', { // 替换为你的服务器地址
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(configuration)
                })
                .then(response => response.text()) // 处理服务器响应
                .then(data => {
                    console.log('成功:', data);
                    alert('配置提交成功!');
                })
                .catch((error) => {
                    console.error('错误:', error);
                });
            }
        }

        function openModal() {
            document.getElementById('messageModal').style.display = 'block';
        }

        function closeModal() {
            document.getElementById('messageModal').style.display = 'none';
        }

        function sendMessage() {
            const ip = document.getElementById('messageIP').value;
            const port = parseInt(document.getElementById('messagePort').value, 10);
            const message = document.getElementById('messageContent').value;

            // 校验端口号
            if (port <= 0 || port >= 65536) {
                alert('端口号应在 1 到 65535 之间。');
                return;
            }

            // 发送消息
            fetch('http://localhost:3000/send-message', { // 替换为你的服务器地址
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ ip, port, message })
            })
            .then(response => response.text()) // 处理服务器响应
            .then(data => {
                console.log('成功:', data);
                alert('消息发送成功!');
                closeModal(); // 关闭模态对话框
            })
            .catch((error) => {
                console.error('错误:', error);
            });
        }
    </script>
</body>
</html>
